<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>播放器</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .line {
            width: 500px;
            height: 10px;
            background-color: #000000;
            border-radius: 5px;
            margin: 20px auto;
            overflow: hidden;
        }

        .line>.progress {
            height: 100%;
            width: 0%;
            background-color: red;
            border-radius: 5px;
        }

        .controls {
            width: 500px;
            height: 50px;
            border: 1px solid red;
            margin: 0 auto;
            padding: 0 10px;
            box-sizing: border-box;
        }
        button{
            width: 80px;
            height: 30px;
        }
    </style>
</head>

<body>
    <audio id="player" src="./audio/孤独.m4a" loop></audio>
    <div class="line">
        <div class="progress"></div>
    </div>
    <div class="controls flex j-s a-c">
        <button class="play">播放</button>
        <div class="flex a-c">
            <div class="time2">00:00</div>
            <div style="width:20px;text-align: center;"> / </div>
            <div class="time1">00:00</div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="../js/bing.js"></script>
    <script>
        let player = $('#player')[0] //获取播放器对象
        console.log(player.__proto__);  //查看播放器的原型
        console.log(player.duration);   //总时间（秒）
        console.log(player.currentTime); //当前播放时间
        //播放按钮点击事件
        $('.play').click(function(){
            //判断播放器如果是暂停，就播放
            if(player.paused){
                player.play()
                $(this).text('暂停')
            }else{
                //是播放，就暂停
                player.pause()
                $(this).text('播放')
            }
        })

        //进度条点击事件
        $('.line').click(function(e){
            if(!player.paused){
                let time1 = player.duration   //总时间
                let width = e.pageX-$(this).offset().left
                let all_width = $(this).innerWidth()
                let percent = width / all_width //点击位置的占比
                //更新播放时间
                player.currentTime = time1 * percent
            }
        })

        setInterval(() => {
            let time1 = player.duration   //总时间
            let r1 = $.getHMS(time1*1000)  //返回总时间的时分秒
            $('.time1').text(r1.m+':'+r1.s)
            let time2 = player.currentTime  //播放时间
            let r2 = $.getHMS(time2*1000)
            $('.time2').html(r2.m+':'+r2.s)
            let percent = time2/time1*100+'%'
            $('.progress').css('width',percent)  //更新滚动条的进度
        }, 800);
    </script>
</body>

</html>